<template>
	<view class="container">
		<h2 style="margin-bottom: 10px;">班级文件</h2>
		<!-- 文件列表 -->
		<view class="uni-container">
			<uni-table ref="table" :loading="loading" border stripe type="selection" emptyText="暂无更多数据"
				@selection-change="handleSelectionChange">
				<uni-tr>
					<uni-th width="150" align="center">文件名</uni-th>
					<uni-th width="185" align="center">设 置</uni-th>
				</uni-tr>
				<uni-tr v-for="(item, index) in paginatedFileList" :key="index" :data-file-id="item.fileId">
					<uni-td>{{ item.fileName }}</uni-td>
					<uni-td>
						<view class="uni-group" align="center">
							<button class="uni-button" size="mini" type="primary"
								@tap="downloadFileById(item.fileId)">下载</button>
							<button class="uni-button" size="mini" type="warn"
								@tap="showFileDetail(item.fileId)">预览</button>
						</view>
					</uni-td>
				</uni-tr>
			</uni-table>
			<view class="uni-pagination-box">
				<uni-pagination show-icon :page-size="pageSize" :current="pageCurrent" :total="total"
					@change="change" />
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from 'vue';
	import fileApi from '@/api/file.js';
	import {
		useUserStore
	} from '@/store/store.js';

	const userStore = useUserStore();
	const user = ref(userStore.userInfo);

	const fileList = ref([]);
	const pageSize = ref(10);
	const pageCurrent = ref(1);
	const total = ref(0);
	const loading = ref(false);

	const paginatedFileList = computed(() => {
		const start = (pageCurrent.value - 1) * pageSize.value;
		const end = start + pageSize.value;
		return fileList.value.slice(start, end);
	});

	const handleSelectionChange = (e) => {
		// 处理文件选择变化的逻辑，这里暂未实现具体功能
		console.log('Selected files:', e.detail);
	};

	const downloadFileById = (fileId) => {
		// 下载文件的逻辑，这里暂未实现具体功能
		console.log('Downloading file with id:', fileId);
	};

	const showFileDetail = (fileId) => {
		// 显示文件详情的逻辑，这里暂未实现具体功能
		console.log('Showing file detail for id:', fileId);
	};

	onMounted(() => {
		loading.value = true;
		const classesNameTxt = user.value?.classesName;
		console.log('classesNameTxt-----班级文件:', classesNameTxt);
		if (classesNameTxt) {
			fileApi.getFileListByClassesName(classesNameTxt).then((res) => {
				if (res.code === 200) {
					fileList.value = res.data;
					total.value = res.data.length;
				} else {
					console.error('获取文件列表失败:', res.message);
				}
			}).catch((err) => {
				console.error('网络错误:', err);
			}).finally(() => {
				loading.value = false;
			});
		}
	});
</script>

<style lang="scss">
	.container {
		padding: 30px;
	}

	.form-view {
		display: flex;
		flex-direction: column;
		align-items: stretch;
	}

	.form-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10px;
	}

	.form-item {
		flex: 1;
		margin-right: 10px;

		&:last-child {
			margin-right: 0;
		}
	}

	.button-round {
		border-radius: 999px; // Example for rounded button
	}

	.contacts-list {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
		margin-top: 20px;
		padding: 10px;
	}

	.contact-item {
		display: flex; // 设置为flex布局，使子元素并排显示
		border-bottom: 1px solid #eee;
		padding: 10px 0;

		&:last-child {
			border-bottom: none;
		}
	}

	.contact-cell {
		flex: 1; // 每个单元格占据相同的空间
		text-align: center;
		padding: 10px; // 增加内边距，以便单元格之间有间隔
	}

	.contact-info {
		display: flex;
		justify-content: space-between;
		margin-bottom: 5px;
	}

	.contact-name {
		font-size: 18px;
		font-weight: bold;
	}

	.contact-sex {
		font-size: 16px;
	}

	.contact-details {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
	}

	.contact-phone,
	.contact-email,
	.contact-class {
		margin-right: 10px;

		&:last-child {
			margin-right: 0;
		}
	}

	.table-header {
		display: flex;
		background-color: #f0f0f0;
		padding: 10px;
		font-weight: bold;
	}

	.header-cell {
		flex: 1;
		text-align: center;
	}

	.pagination {
		display: flex;
		justify-content: center;
		margin-top: 20px;
	}

	.button {
		margin: 0 10px;
	}

	.file-item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #eee;
		padding: 10px 0;

		&:last-child {
			border-bottom: none;
		}
	}

	.file-cell {
		flex: 1;
		text-align: center;
		padding: 10px;
	}

	.delete-button {
		margin-left: 10px;
		background-color: #f44336; // 红色背景
		color: white;
		border: none;
		border-radius: 4px;
		padding: 5px 10px;
		cursor: pointer;
		transition: background-color 0.3s ease;

		&:hover {
			background-color: darken(#f44336, 10%);
		}
	}

	.batch-delete {
		margin-top: 20px;
		text-align: center;
	}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}

	.custom-image-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.text {
		font-size: 14px;
		color: #333;
	}

	.uni-group {
		display: flex;
		align-items: center;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}

	.uni-px-5 {
		padding-left: 10px;
		padding-right: 10px;
	}

	.uni-pb-5 {
		padding-bottom: 10px;
	}
</style>